<template>
    <div>
        <Modal width="800"
               v-model="modal.updateModal"
               @on-ok="ok"
               @on-cancel="cancel"
               draggable
               scrollable
               :loading="loading"
               title="教师信息编辑">
            <Row type="flex" justify="center">
                <Col span="5">
                    <Row type="flex" justify="center">
                        <div style="cursor:pointer;" class="pic" @click="cropperFlag = true">
                            <img v-if="imgsrc!=null" class="pic" :src="imgsrc">
                            <Icon v-else type="ios-camera" size="68"></Icon>
                        </div>
                    </Row>
                </Col>
                <Col class="teacherForm" span="17">
                    <Form :label-width="140">
                        <FormItem label="用户名称：">
                            <Input v-model="modal.user.userName"/>
                        </FormItem>
                        <FormItem label="是否为公司员工：">
                            <i-switch v-model="isWorkers">
                                <span slot="open">是</span>
                                <span slot="close">否</span>
                            </i-switch>
                        </FormItem>
                    </Form>
                </Col>
            </Row>
        </Modal>
        <modal-cropper :cropperFlag = "cropperFlag" @getfile="getfile"></modal-cropper>
    </div>
</template>

<script>
    import modalCropper from "@/components/cropper/modalCropper"
    export default {
        components:{modalCropper},
        data() {
            return {
                cropperFlag:false,
                imgsrc: null,
                isWorkers:false,
                loading: true,
            }
        },
        props: {
            modal: {
                updateModal: false,
                user: {}
            }
        },
        methods: {
            ok() {
                let that = this;
                that.isWorkers ? that.modal.user.isWorkers = 2 : that.modal.user.isWorkers = 1
                that.http.post("/user/saveUserUpdate", this.qs.parse(this.modal.user)).then(res => {
                    if (res.data) {
                        that.$parent.$options.parent.getAllUser();
                        that.$Message.success("修改成功！！！")
                        this.$emit("updatestatus", false)
                    } else {
                        this.$Message.error("失败了")
                        this.loading = false
                    }
                }).catch(res => {
                    this.$Message.error("错误啦")
                    this.loading = false
                })
            },
            cancel() {
                this.$emit("updatestatus", false)
            },
            /**
             * 上产头像
             */
            getfile(file){
                let formData = new FormData();
                formData.append("file",file)
                this.http.post("/user/uploadAvatar",formData,{headers:{'Content-Type':'multipart/form-data'}}).then(res=>{
                    if(res.data){
                        this.imgsrc = res.data.resourceUrl;
                        this.modal.user.headPicUrl = res.data.resourceId;
                    }
                })
            },
        },
        watch: {
            'modal.user.pic.resourceUrl'(val) {
                this.imgsrc = val
            },
            /**
             *利用'modal.addModal'变量值为true的情况下在里面进行初始化，防止父组件加载时候子组件也同时加载
             * @param val
             */
            'modal.user.isWorkers'(val) {
                val == 1 ? this.isWorkers = false : this.isWorkers = true
            },
            cropperFlag(flag){
                this.modal.updateModal = flag?false:true
            }
        }
    }
</script>

<style scoped>
    .pic {
        width: 70px;
        height: 70px;
        border: 1px dashed #dcdee2;
        border-radius: 10px;
    }

    .teacherForm {
        border-left: 1px solid #c1c1c1;
        padding-left: 10px;
    }
</style>
